<template>
    <div>
        <img src="../../assets/laboratory/laboratory-banner.png" style="width: 100%">
        <div class="main">
            <div class="title">
                <div class="titleIn" @click="tabColor=1">
                    <p :class="tabColor==1?'blue':'none'">项目展示</p>
                    <p :class="tabColor==1?'blue':'none'">Project display</p>
                </div>
                <div class="titleIn" @click="tabColor=2">
                    <p :class="tabColor==2?'blue':'none'">新闻动态</p>
                    <p :class="tabColor==2?'blue':'none'">News information</p>
                </div>
            </div>
            <div class="main">
                <div class="smallProduct" v-if="tabColor==1">
                    <div class="smallProductIn" v-for="(v,i) of literShow" :key="i" @click="toDetail(v.id,'星火项目')">
                        <div style="width: 277px;height: 176px;overflow: hidden">
                            <img :src="'http://www.shangyuninfo.com/api/profile/product/'+v.route" alt="" class="animate">
                        </div>
                        <div class="shadow">
                            <p class="titles">{{v.name}}</p>
                            <p class="text">{{v.descri}}</p>
                        </div>
                    </div>
                </div>
                <div class="smallProduct" v-if="tabColor==2">
                    <div class="smallProductIn" v-for="(v,i) of newsShow" :key="i" @click="toDetail(v.id,'星火动态')">
                        <div style="width: 277px;height: 176px;overflow: hidden">
                            <img :src="'http://www.shangyuninfo.com/api/profile/product/'+v.route" alt="" class="animate">
                        </div>
                        <div class="shadow">
                            <h3 class="titles">{{v.name}}</h3>
                            <p class="text">{{v.descri}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {getLaboratoryList, getLaboratoryNews} from "../../api";

    export default {
        name: "laboratoryIn",
        data(){
            return {
                tabColor:1,
                literShow:[],
                newsShow:[]
            }
        },
        created() {
            this.$store.commit('changePage', 3)
            getLaboratoryList().then(res =>{
                console.log(res)
                this.literShow=res.data.rows

            })
            getLaboratoryNews().then(res =>{
                console.log(res)
                this.newsShow=res.data.rows

            })
        },
        methods:{
            toDetail(to,select) {
                this.$router.push({
                    path:'/detailsForNews',
                    query:{
                        id:to,
                        select:select,
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .main {
        width: 100%;
        min-width: 1200px;
        margin: auto;
    .title {
        width: 600px;
        margin: 60px auto;
        overflow: hidden;
    }
    .titleIn {
        width: 200px;
        float: left;
        text-align: center;
        padding-left: 100px;
    p:first-child{
        font-size: 22px;
        text-align: center;
        cursor: pointer;
    }
    p:last-child {
        font-size: 22px;
        text-align: center;
        cursor: pointer;
        height: 50px;
        line-height: 50px;
        opacity: 0.7;
    }
    }
    }
    .blue {
        color: #71cfff!important;
    }
    //新闻主体等效果
      .main {
          width: 970px;
          margin: auto;
      }
    .smallProduct {
        overflow: hidden;
    }

    .smallProductIn {
        float: left;
        width: 277px;
        padding: 0px 10px;
        margin-bottom: 20px;
        cursor: pointer;
    img {
        width: 100%;
        height: 176px;
    }
    .titles {
        font-size:16px;
        font-weight: 700;
        word-wrap:break-word;
        margin: 10px;
    }
    .text {
        font-size: 13px;
        line-height: 20px;
        padding: 0 10px;
        color: #666;
        letter-spacing: 1px;
        text-align: left;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 3;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        margin: 10px 0;
    }
    }
    .smallProductIn:hover .shadow {
        box-shadow:  0px 0px 5px #dcdcdc;
    }
    .shadow {
        float: right;
        width: 99.8%;
        margin-left: 0.1%;
    }
    /*//动画效果*/
    .animate {
        transition: transform 1s ease;
    }
    .animate:hover {
        transform: scale(1.1,1.1);
    }
</style>